<template>
  <el-dialog
    :title="plugin.lang('point.title')"
    v-model="show"
    :width="800"
  >
    <el-table :data="list" style="width: 100%;">
      <el-table-column :label="plugin.lang('point.account_name')" prop="account_name" />
      <el-table-column :label="plugin.lang('point.point')" prop="point" align="center">
        <template #default="scope">
          <el-link :type="scope.row.point > 0 ? 'primary' : 'danger'" href="javascript:;">{{ scope.row.point }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="plugin.lang('point.content')" prop="content" min-width="200" />
      <el-table-column :label="plugin.lang('point.time')" align="right" min-width="150">
        <template #default="scope">
          {{ time.format(scope.row.created_at) }}
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @current-change="onPage"
        :current-page="where.page"
        :page-size="where.page_size"
        layout="total, prev, pager, next, jumper"
        :total="where.page_total"
        >
      </el-pagination>
    </div>
  </el-dialog>
</template>
<script>
import { ref } from 'vue'
import app from '@/app'
import { get } from '@/api/erp/client_point'

export default {
  setup() {
    const plugin = app.plugin.index

    // 显示
    const show = ref(false)

    // ID
    const id = ref(0)

    // 列表
    const list = ref([])

    // 附加参数
    const where = ref({})

    // 加载
    const getData = () => {
      get(id.value, where.value).then(res => {
        list.value = res.data
        where.value = {
          page: res.current_page,
          page_size: res.per_page,
          page_total: res.total
        }
      })
    }

    // 分页
    const onPage = page => {
      where.value.page = page
      getData()
    }

    // 打开
    const open = data => {
      // 客户ID
      id.value = data.id

      // 加载数据
      onPage(1)

      // 显示
      show.value = true
    }

    return {
      time: app.time,
      plugin,
      show,
      list,
      where,
      open,
      onPage
    }
  }
}
</script>